<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<h2>小人跑步动画</h2>
	<img id="img1" src="pao.png" />
	<input id="btngo" type="button" value="开始" onclick="init()" />
	<br/>
	<canvas id="mycanvas" width="600px" height="600px" style="border:1px solid black;"></canvas>
</body>
</html>
<style>
	body{text-align: center;}
</style>

<script>
	var startflag =false;
	var frames = [];
	for (var i = 0; i < 8; i++) {
		frames[i] = [i*137,0]
	}
	function $(id){
		return document.getElementById(id)
	}
	var fwidth = 137,fheight=137;

	function init(){
		if(!startflag){
			var context = $("mycanvas").getContext("2d");
			var fIndex = 0;
			timer = setInterval(function(){
				context.clearRect(0,0,500,500)
				context.drawImage(img1,frames[fIndex][0],frames[fIndex][1],fwidth,fheight,100,100,fwidth*1,fheight*1)
			fIndex++;
			if(fIndex>=8){
				fIndex=0
			}
			},100)

			startflag = true;
			$("btngo").value = "停止"
		}else{
			startflag = false;
			$("btngo").value = "开始"
			clearInterval(timer)
		}
	}
</script>